Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Download
Download
Download
Download
Download
Download
Download
Download
Download
Download
Download
Download
/* FLAT BUTTONS */ /* Old Flat Button - ofbutton */ .ofbutton { margin-top: 10px; margin-right: 10px; padding: 14px 26px; font-size: 14px; line-height: 100%; text-shadow: 0 1px rgba(0, 0, 0, 0.4); color: #fff; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; font-weight: bold; transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; -moz-transition: background 0.1s ease-in-out; -ms-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; text-shadow: 0 1px rgba(0, 0, 0, 0.3); color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-family: "Helvetica Neue", Helvetica, sans-serif; } .ofbutton:active { padding-top: 15px; margin-bottom: -1px; } .ofbutton, .ofbutton:hover, .ofbutton:active { outline: 0 none; text-decoration: none; color: #fff; } .ofbutton-blue { background-color: #3fb8e8; box-shadow: 0px 3px 0px 0px #3293ba; } .ofbutton-blue:hover { background-color: #1baae3; } .ofbutton-blue:active { box-shadow: 0px 1px 0px 0px #3293ba; } .ofbutton-red { background-color: #f06060; box-shadow: 0px 3px 0px 0px #cd1313; } .ofbutton-red:hover { background-color: #ed4444; } .ofbutton-red:active { box-shadow: 0px 1px 0px 0px #cd1313; } .ofbutton-pink { background-color: #ff6a80; box-shadow: 0px 3px 0px 0px #da0020; } .ofbutton-pink:hover { background-color: #ff566f; } .ofbutton-pink:active { box-shadow: 0px 1px 0px 0px #da0020; } .ofbutton-orange { background-color: #fdc058; box-shadow: 0px 3px 0px 0px #e29003; } .ofbutton-orange:hover { background-color: #fdb53a; } .ofbutton-orange:active { box-shadow: 0px 1px 0px 0px #e29003; } .ofbutton-purple { background-color: #aa65c7; box-shadow: 0px 3px 0px 0px #883da7; } .ofbutton-purple:hover { background-color: #9e4fbf; } .ofbutton-purple:active { box-shadow: 0px 1px 0px 0px #883da7; } .ofbutton-green { background-color: #2ecc71; box-shadow: 0px 3px 0px 0px #239a55; } .ofbutton-green:hover { background-color: #28b363; } .ofbutton-green:active { box-shadow: 0px 1px 0px 0px #239a55; } /* Rounded Old Flat Button - rofbutton */ .rofbutton { margin-top: 10px; margin-right: 10px; padding: 14px 26px; font-size: 14px; line-height: 100%; text-shadow: 0 1px rgba(0, 0, 0, 0.4); color: #fff; vertical-align: middle; display: inline-block; text-align: center; cursor: pointer; font-weight: bold; transition: background 0.1s ease-in-out; -webkit-transition: background 0.1s ease-in-out; -moz-transition: background 0.1s ease-in-out; -ms-transition: background 0.1s ease-in-out; -o-transition: background 0.1s ease-in-out; text-shadow: 0 1px rgba(0, 0, 0, 0.3); color: #fff; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; font-family: "Helvetica Neue", Helvetica, sans-serif; } .rofbutton:active { padding-top: 15px; margin-bottom: -1px; } .rofbutton, .rofbutton:hover, .rofbutton:active { outline: 0 none; text-decoration: none; color: #fff; }